<template>
  <div class="list">
    <el-collapse>
      <el-collapse-item title="商品管理介绍">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>

      </el-collapse-item>

    </el-collapse>
    <el-collapse class="margin-30">
      <el-collapse-item title="条件查询">
        <el-form ref="searchForm" :model="searchForm" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="searchForm.name" placeholder="商品名称" />
              </el-form-item></el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="商品货号">
                <el-input v-model="searchForm.productSn" placeholder="商品货号" />
              </el-form-item></el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="品牌">
                <!-- <el-input v-model="searchForm.brandId" placeholder="品牌" /> -->
                <el-select v-model="searchForm.brandId" placeholder="品牌" clearable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item></el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="上架状态">
                <!-- publishStatus (integer, optional): 上架状态，0->下架；1->上架 , -->
                <!-- <el-input v-model="searchForm.publishStatus" /> -->
                <el-select v-model="searchForm.publishStatus" placeholder="上架状态" clearable>
                  <el-option
                    v-for="item in publishStatus"
                    :key="item.id"
                    :label="item.text"
                    :value="item.value"
                  />
                </el-select>

              </el-form-item></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="审核状态">
                <!-- verifyStatus (integer, optional): 审核状态：0->未审核；1->审核通过 -->
                <!-- <el-input v-model="searchForm.verifyStatus" placeholder="审核状态" /> -->
                <el-select v-model="searchForm.verifyStatus" placeholder="审核状态" clearable>
                  <el-option
                    v-for="item in verifyStatus"
                    :key="item.id"
                    :label="item.text"
                    :value="item.value"
                  />
                </el-select>

              </el-form-item></el-col>
            <el-col :span="5" :offset="13">
              <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button>取消</el-button>
              </el-form-item></el-col>
          </el-row>

        </el-form>

      </el-collapse-item>

    </el-collapse>

    <!-- 商品列表 -->
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goAddProduct">新增</el-button>
        <el-button type="primary" size="mini" @click="exportExcel">导出商品列表excel文件 </el-button>

      </div>
      <el-table :data="productList" border stripe>
        <el-table-column
          type="index"
          label="#"
          width="50"
        />
        <el-table-column
          label="商品图片"
          width="120"
        >
          <template slot-scope="scope">
            <img width="100" height="100" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="商品价格"
          width="120"
        >
          <template slot-scope="scope">
            <div>原价: {{ scope.row.originalPrice }}</div>
            <div>现价: {{ scope.row.price }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="标签"
          width="120"
        >
          <template slot-scope="scope">
            <!-- 'newStatus': 0, // 新品状态:0->不是新品；1->新品 ,新品会在移动端首页推荐 -->
            <div>最新:<el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" @change="changeNewStatus(scope.row.id,scope.row.newStatus)" />
            </div>
            <!--  // 推荐状态；0->不推荐；1->推荐 ,'recommendStatus': 0,-->
            <div>推荐:<el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template>
            <el-button type="text" size="mini" style="color:#409eff;">编辑</el-button>
            <el-button type="text" size="mini" style="color:red;">删除</el-button>

          </template>
        </el-table-column>

      </el-table>

    </el-card>

  </div>
</template>
<script>
import {
  findAllBrand as findAllBrandApi,
  productsByPage as productsByPageApi,
  switchNewStatus as switchNewStatusApi
} from '@/api/product/list'
import mix from '@/mixins/index'
export default {
  name: 'ProductList',
  mixins: [mix],
  data() {
    return {
      searchForm: {},
      brandList: [],
      publishStatus: [
        {
          id: 0,
          text: '未上架',
          value: 0
        },
        {
          id: 1,
          text: '上架',
          value: 1
        }
      ],
      verifyStatus: [
        {
          id: 0,
          text: '未审核',
          value: 0
        },
        {
          id: 1,
          text: '审核通过',
          value: 1
        }
      ],
      productList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getBrandList()
    this.getProductList()
  },
  mounted() {
  },
  methods: {
    exportExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        // const tHeader = ['商品名称', '价格', '商品类别']
        // const data = [
        //   ['iphone16', 10000, '手机'],
        //   ['iphone17', 10001, '手机'],
        //   ['iphone18', 10002, '手机'],
        //   ['iphone19', 100003, '手机'],
        //   ['iphone20', 100004, '手机']
        // ]
        const tHeader = ['Id', '品牌', '商品名称', '商品价格', '创建时间']
        const filterVal = ['id', 'brandName', 'name', 'price', 'createTime']
        const list = this.productList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: '商品数据', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    goAddProduct() {
      this.$router.push({ name: 'ProductDetail' })
    },
    async getBrandList() {
      const res = await findAllBrandApi()
      const { success, data, message } = res
      if (success) {
        this.brandList = data.items
      } else {
        this.$message.error(message)
      }
    },
    async getProductList() {
      const res = await productsByPageApi(this.paginationObj.start, this.paginationObj.limit)
      const { success, data, message } = res
      if (success) {
        this.productList = data.rows
        this.paginationObj.total = data.total
      } else {
        this.$message.error(message)
      }
    },
    async changeNewStatus(id, status) {
      // console.log(id, status)
      const res = await switchNewStatusApi({
        productId: id,
        status: status
      })
      const { success, message } = res
      if (success) {
        // 1. 提示
        this.$message.success('新品状态修改成功')
        // 2. 刷新数据
        this.getProductList()
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .list{
    .el-collapse{
      text-indent: 10px;
      padding-bottom: 10px;
      background-color: #fff;
    }
  }
</style>
